<template>
  <!-- 这里是就诊咨询 -->
  <div class="doctorConsultation_wrap">
    <!-- 标题 -->
    <div class="docCon_title">
      <h2>
        <span>就诊资讯</span>
      </h2>
    </div>
    <!-- 内容 -->
    <div class="docCon_main">
      <!-- 一, 搜索框 -->
      <div class="medical_search">
        <form class="medical_search_form">
          <!-- 姓名 -->
          <div class="medical_search_form_inp medical_search_name">
            <input type="text" name placeholder="请输入用户姓名" />
          </div>
          <!-- 时间 -->
          <!--  <div class="medical_search_form_inp medical_search_time">
            <input type="text" list="timeList" placeholder="选择时间" />
            <datalist id="timeList">
              <option value="date">vue-datepicker-local插件</option>
            </datalist>
          </div>-->
          <vue-datepicker-local showButtons inputClass="datapickInput" v-model="datetime"></vue-datepicker-local>
          <!-- 搜索 -->
          <div class="medical_search_btn">
            <i class="fa fa-search"></i>
          </div>
        </form>
      </div>
      <!-- 二, 内容 -->
      <div class="medical_content">
        <table class="medical_list" cellspacing="0">
          <tr class="medicai_list_title">
            <th class="medicai_list_check">
              <input type="checkbox" />
            </th>
            <th>序号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>日期</th>
            <th>问题描述</th>
            <th>主要症状</th>
            <th>所用药物</th>
            <!-- <th>操作</th> -->
          </tr>
          <tr class="medicai_list_item" v-for="(medical, index) in medical_lists" :key="index">
            <td>
              <input type="checkbox" />
            </td>
            <td>
              <!-- {{++index}} -->
              001
            </td>
            <td>{{medical.med_name}}</td>
            <td>{{medical.med_gender}}</td>
            <td>{{medical.med_age}}</td>
            <td>{{medical.med_hospitalTime}}</td>
            <td>{{medical.med_problemDes}}</td>
            <td>{{medical.med_mainSymptoms}}</td>
            <td>{{medical.med_medicine}}</td>
            <td class="hospital_handle">
              <router-link to="###" @click.native="saveProblem(index)">
                <span class="medicai_list_lookdetails">解答问题</span>
              </router-link>
            </td>
          </tr>
        </table>
      </div>
      <!-- 三, 页码操作控制 -->
      <div class="medical_control">
        <!-- 批量删除 -->
        <div class="medical_delete">
          <i class="fa fa-trash"></i>
          批量删除
        </div>
        <!-- 页面切换组件 -->
        <div class="medical_pagenation">
          <router-view></router-view>
        </div>
      </div>
    </div>
    <!-- 问题解答提示框 -->
    <div v-show="isShowMask" class="addMedical_alert">
      <div class="alert">
        <!-- 标题提示信息 -->
        <div class="alert_title">
          <h2 class="fl">问题解答</h2>
          <div class="fr">
            <i class="fa fa-times-circle-o" @click="closeMask"></i>
          </div>
        </div>
        <!-- 警示内容 -->
        <div class="alert_content">
          <!-- 查询时, 显示的内容 -->
          <div class="alert_con_check textarea_con">
            <p>解答:</p>
            <div class="alertIpt_wrapDiv">
              <textarea v-model="saveScheme" placeholder="请输入您的解决办法"></textarea>
            </div>
          </div>
        </div>
        <!-- 按钮 -->
        <div class="alert_button">
          <!-- 查询时, 显示的内容 -->
          <div class="alert_button_check">
            <input class="alert_surebtn" type="button" value="确定" @click="alertSureBtn" />
            <router-link class="cancleBtn" to="/DoctorConsultation">
              <!-- PS: 感觉这里直接跳转有点坑了, 是不是后期加个弹窗, 缓冲下 -->
              <input class="alert_canclebtn" type="button" value="取消" @click="cancleBtn" />
            </router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import VueDatepickerLocal from "vue-datepicker-local";
export default {
  name: "DoctorConsultation",
  components: {
    VueDatepickerLocal
  },
  data() {
    return {
      datetime: new Date(),
      changeIndex: 0, // 记录要修改的处方对象的下标
      isShowMask: false, // 是否显示问题解答提示框
      saveScheme: "", // 存储解决方法
      medical_lists: [
        {
          med_id: "",
          med_name: "刘德华",
          med_gender: "男",
          med_age: "50",
          med_hospitalTime: "2018-12-4",
          med_problemDes: "感冒发烧流鼻涕",
          med_mainSymptoms: "头痛, 恶心, 食欲不振",
          med_medicine: "红霉素, 左氧氟沙星"
        },
        {
          med_id: "",
          med_name: "刘德华",
          med_gender: "男",
          med_age: "50",
          med_hospitalTime: "2018-12-4",
          med_problemDes: "感冒发烧流鼻涕",
          med_mainSymptoms: "头痛, 恶心, 食欲不振",
          med_medicine: "红霉素, 左氧氟沙星"
        },
        {
          med_id: "",
          med_name: "刘德华",
          med_gender: "男",
          med_age: "50",
          med_hospitalTime: "2018-12-4",
          med_problemDes: "感冒发烧流鼻涕",
          med_mainSymptoms: "头痛, 恶心, 食欲不振",
          med_medicine: "红霉素, 左氧氟沙星"
        },
        {
          med_id: "",
          med_name: "刘德华",
          med_gender: "男",
          med_age: "50",
          med_hospitalTime: "2018-12-4",
          med_problemDes: "感冒发烧流鼻涕",
          med_mainSymptoms: "头痛, 恶心, 食欲不振",
          med_medicine: "红霉素, 左氧氟沙星"
        },
        {
          med_id: "",
          med_name: "刘德华",
          med_gender: "男",
          med_age: "50",
          med_hospitalTime: "2018-12-4",
          med_problemDes: "感冒发烧流鼻涕",
          med_mainSymptoms: "头痛, 恶心, 食欲不振",
          med_medicine: "红霉素, 左氧氟沙星"
        },
        {
          med_id: "",
          med_name: "刘德华",
          med_gender: "男",
          med_age: "50",
          med_hospitalTime: "2018-12-4",
          med_problemDes: "感冒发烧流鼻涕",
          med_mainSymptoms: "头痛, 恶心, 食欲不振",
          med_medicine: "红霉素, 左氧氟沙星"
        },
        {
          med_id: "",
          med_name: "刘德华",
          med_gender: "男",
          med_age: "50",
          med_hospitalTime: "2018-12-4",
          med_problemDes: "感冒发烧流鼻涕",
          med_mainSymptoms: "头痛, 恶心, 食欲不振",
          med_medicine: "红霉素, 左氧氟沙星"
        },
        {
          med_id: "",
          med_name: "刘德华",
          med_gender: "男",
          med_age: "50",
          med_hospitalTime: "2018-12-4",
          med_problemDes: "感冒发烧流鼻涕",
          med_mainSymptoms: "头痛, 恶心, 食欲不振",
          med_medicine: "红霉素, 左氧氟沙星"
        },
        {
          med_id: "",
          med_name: "刘德华",
          med_gender: "男",
          med_age: "50",
          med_hospitalTime: "2018-12-4",
          med_problemDes: "感冒发烧流鼻涕",
          med_mainSymptoms: "头痛, 恶心, 食欲不振",
          med_medicine: "红霉素, 左氧氟沙星"
        },
        {
          med_id: "",
          med_name: "刘德华",
          med_gender: "男",
          med_age: "50",
          med_hospitalTime: "2018-12-4",
          med_problemDes: "感冒发烧流鼻涕",
          med_mainSymptoms: "头痛, 恶心, 食欲不振",
          med_medicine: "红霉素, 左氧氟沙星"
        }
      ]
    };
  },
  methods: {
    saveProblem: function(index) {
      // 记录数据下标
      this.changeIndex = index;
      // 显示弹窗
      this.isShowMask = true;
      alert(
        "在这里,一方面要弹出修改窗口, 另一方面 当点击修改窗口中的'确定'按钮时 根据 index, 找到medical_lists数组中对应的对象, 然后修改数组中对象的 med_prescription属性"
      );
    },
    closeMask: function() {
      this.isShowMask = false;
    },
    alertSureBtn: function() {
      // 获取文本域中的值, 进行数据提取, 重置后, 返回后台一份数据
      alert(this.saveScheme);
    },
    cancleBtn: function() {
      this.isShowMask = false;
    }
  }
};
</script>
<style scoped>
/* 电子病历页面样式 */
@import url("../../css/EMedicalRecord.css");
/* 弹窗 */
@import url("../../css/AlertBox.css");
/* 文本域警示框样式 */
@import url("../../css/AlertTextarea.css");

/* 外部控制元素 */
.doctorConsultation_wrap {
  height: 100%;
}

/* 输入框外层控制div的大小重置 */
.medical_search_form_inp {
  width: 100px;
}

/* 操作 */
.hospital_handle {
  font-size: 0;
  word-spacing: 14px;
}
.hospital_handle a {
  color: #16dcb8;
  font-size: 14px;
}
.hospital_handle a:hover {
  color: #999999;
}
</style>

<style>
.datepicker {
  margin-right: 10px;
}
.datepicker > input {
  border-radius: 40px;
}
</style>